<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>准备进行深度改进的小黑板</title>
</head>
<body>
	<button style="background-color: white; width:70px;height:30px" onclick="rubber()">rubber</button>	
	<button style="background-color: lightcoral; width:70px;height:30px" onclick="clearAll()">clearAll</button>
	<br/>
	<canvas id="mycanvas" width="600px" height="300px" style="border:1px solid #ccc"></canvas>
	<br/>
	<button style="background-color:lemonchiffon; width:70px;height:30px" onclick="flag=false;linecolor='lemonchiffon'" >lightlemon</button>
	<button style="background-color:plum; width:70px;height:30px" onclick="flag=false;linecolor='plum'">plum</button>
	<button style="background-color:blueviolet; width:70px;height:30px" onclick="flag=false;linecolor='blueviolet'">blueviolet</button>
	<button style="background-color:lightblue; width:70px;height:30px" onclick="flag=false;linecolor='lightblue'">lightblue</button>
	<button style="background-color:red; width:70px;height:30px" onclick="flag=false;linecolor='red'">red</button>
	<button style="background-color:snow; width:70px;height:30px" onclick="flag=false;linecolor='snow'">snow</button>
	<button style="background-color:lightpink; width:70px;height:30px" onclick="flag=false;linecolor='lightpink'">lightpink</button>
	<button style="background-color:tomato; width:70px;height:30px" onclick="flag=false;linecolor='tomato'">tomato</button>
</body>
</html>
<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var context = canvas.getContext('2d');
	context.fillStyle = 'black';
	context.fillRect(0,0,600,300)

	var flag = false 

	var onoff = false;
	var linecolor = 'white';
	var linew = 4;
	var oldx = -10;
	var oldy = -10;

	canvas.addEventListener('mousemove',draw,true)
	canvas.addEventListener('mousedown',down,false)
	canvas.addEventListener('mouseup',up,false)

	function rubber(){
		flag = true
		// linecolor = 'black';
		// linew = 12;

	}

	function clearAll(){
		context.clearRect(0,0,600,300)
		context.fillRect(0,0,600,300)
	}

	function up(){
		onoff = false

	}

	function down(e){
		onoff = true;
		oldx = e.pageX-canvas.offsetLeft+document.body.scrollLeft;
		oldy = e.pageY-canvas.offsetTop+document.body.scrollTop;

	}

	function draw(e){
		if (onoff == true) {
			if(flag == true) {
				var newx = e.pageX-canvas.offsetLeft+document.body.scrollLeft;
				var newy = e.pageY-canvas.offsetTop + document.body.scrollTop;
				context.beginPath();
				context.moveTo(oldx,oldy);
				context.lineTo(newx,newy);
				context.strokeStyle = 'black';
				context.lineWidth = 12;
				context.lineCap = 'round'
				context.stroke();
				oldx = newx;
				oldy = newy;
			}else{
				var newx = e.pageX-canvas.offsetLeft+document.body.scrollLeft;
				var newy = e.pageY-canvas.offsetTop + document.body.scrollTop;
				context.beginPath();
				context.moveTo(oldx,oldy);
				context.lineTo(newx,newy);
				context.strokeStyle = linecolor;
				context.lineWidth = linew;
				context.lineCap = "round"
				context.stroke();
				oldx = newx;
				oldy = newy;
			}
		}

	}
	
</script>